<style lang="scss" scoped="scoped">
/***连接弹窗***/
$color: #409eff;
.linkDialog {
  z-index: 999;
  overflow: hidden;
  font-size: 12px;
  max-width: 1200px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  top: 10%;
  background: #fff;
  border-radius: 5px;
  box-shadow: #555 0 0 12px;
  .linkd-ht {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      cursor: pointer;
    }
    span:hover {
      color: $color;
    }
    font-size: 15px;
    height: 45px;
    padding: 0 12px;
    border-bottom: 1px solid #f1f1f1;
  }
  .linkd-box {
    display: flex;
    height: 650px;
  }
  .linkd-box {
    .linkd-menu {
      width: 200px;
      border-right: 1px solid #eee;
      li {
        padding: 12px;
        cursor: pointer;
        border-bottom: 1px solid #f1f1f1;
        color: #666;
        span {
          margin-right: 5px;
        }
        &.on,
        &:hover {
          color: $color;
          font-weight: bold;
        }
      }
    }
    .linkd-con {
      flex: 1;
      padding: 20px;
      height: 100%;
      overflow: hidden auto;
      &::-webkit-scrollbar {
        width: 0;
      }
      .linkd-jc {
        position: relative;
        width: 100%;
        height: 100%;
        .classContent {
          position: absolute;
          top: 0;
          left: 150px;
          width: calc(100% - 150px);
          height: 70%;
        }
        .tbBtn {
          position: absolute;
          bottom: 50px;
          left: 0;
        }
      }
      .linkd-search {
        color: #666;
        margin-bottom: 12px;
        ul {
          display: flex;
          li {
            display: flex;
            align-items: center;
            padding-right: 12px;
            padding-bottom: 10px;
            .t {
              min-width: 60px;
            }
            /deep/ .el-input__inner {
              flex: 1;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
            }
            /deep/ .el-select {
              flex: 1;
              font-size: 12px;
            }
            /deep/ .el-input__icon {
              line-height: 30px;
            }
            .el-button {
              padding: 0 10px;
              height: 30px;
            }
            .ml {
              margin-left: 5px;
            }
            &:last-child {
              justify-content: flex-end;
            }
          }
        }
      }
      .table {
        font-size: 12px;
        width: 100%;
        border-top: 1px solid #f1f1f1;
        border-right: 1px solid #f1f1f1;
        th,
        td {
          padding: 8px 5px;
          text-align: center;
          color: #777;
          border-left: 1px solid #f1f1f1;
          border-bottom: 1px solid #f1f1f1;
        }
        th {
          padding: 12px 0;
        }
        tr td:last-child {
          width: 100px;
        }
        tr:hover td {
          background: #f8f8f8;
        }
      }
      .linkd-page-ht {
        display: flex;
        align-items: center;
        color: #666;
        ul {
          display: flex;
          li {
            transition: all 0.3s ease;
            &:hover,
            &.on {
              background: $color;
              color: #fff;
              border-color: $color;
            }
            cursor: pointer;
            margin-right: 12px;
            line-height: 30px;
            padding: 0 12px;
            height: 30px;
            border-radius: 3px;
            border: 1px solid #f1f1f1;
          }
        }
        .search {
          display: flex;
          /deep/ .el-input__inner {
            flex: 1;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
          }
          .el-button {
            padding: 0 10px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
      .linkd-page-list {
        li {
          float: left;
          width: 20%;
          padding-left: 15px;
          padding-top: 15px;
          .card {
            background: #fff;
            box-shadow: #eee 0 0 10px;
            padding: 0 10px;
            h3 {
              padding: 10px 0;
              font-weight: normal;
              color: #666;
              text-align: center;
            }
            img {
              height: 200px;
              width: 100%;
              display: block;
            }
            p {
              padding: 10px;
              span {
                border: 1px solid #ddd;
                color: #888;
                cursor: pointer;
                &:hover {
                  background: $color;
                  color: #fff;
                  border-color: $color;
                }
                border-radius: 3px;
                padding: 5px 10px;
              }
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
      .linkd-zdy {
        margin: 0 auto;
        margin-top: 20%;
        max-width: 60%;
        display: flex;
        .el-button {
          margin-left: 12px;
        }
      }
    }

    .diy-page {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 12px;
    }
  }
}

.radio-body {
  padding-bottom: 15px;
  i {
    padding-right: 5px;
    font-size: 16px;
  }
}
</style>
<template>
  <!--设置连接-->
  <div class="linkDialog" @click.stop>
    <div class="linkd-ht">
      链接选择
      <span class="el-icon-close" @click.stop="closeLink"></span>
    </div>
    <div class="linkd-box">
      <ul class="linkd-menu" v-if="show">
        <li
          v-for="(item, index) in menu"
          :class="item.id === cur ? 'on' : ''"
          @click="cur = item.id"
        >
          <span :class="item.ico"></span>
          {{ item.txt }}
        </li>
      </ul>
      <div class="linkd-con">
        <!--商品-->
        <div class="linkd-shop" v-if="cur === 1">
          <div class="searchGoods" style="margin-bottom: 20px;">
            <span class="t">商品名称：</span>
            <el-input
              v-model.trim="goodsQuery.searchKey"
              placeholder="请输入商品名称"
              style="width:200px;"
              size="small"
              @change="searchGoods"
            ></el-input>
            <el-button type="primary" @click="searchGoods" icon="el-icon-search" size="small"
              style="margin-left: 20px;">搜索</el-button
            >
          </div>
          <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="shopList"
              tooltip-effect="dark"
              style="width: 100%"
              border
            >
              <el-table-column prop="goodsId" label="商品ID" width="120">
              </el-table-column>
              <el-table-column
                prop="goodsType"
                label="商品分类"
                width="120"
              >
              </el-table-column>
              <el-table-column label="商品名称" prop="goodsName"></el-table-column>
              <el-table-column label="商品图片" prop="goods_Img">
                <template slot-scope="scoped">
                  <img :src="scoped.row.goods_Img" alt="商品图片">
                </template>
              </el-table-column>
              <el-table-column prop="goods_RetailPrice" label="单价">
                <template slot-scope="scoped">￥{{ scoped.row.goods_RetailPrice }}</template>
              </el-table-column>
              <el-table-column  label="规格" prop="goodsSpecs"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    icon="el-icon-check"
                    @click="selectGoods(scope.row)"
                    size="mini"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="diy-page">
              <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                v-if="shopTotal > 0"
                :hide-on-single-page="true"
                @current-change="shopCurrent"
                @prev-click="shopCurrent"
                @next-click="shopCurrent"
                :total="shopTotal"
              ></el-pagination>
            </div>
        </div>
        <!--自定义链接-->
        <div class="linkd-zdy" v-if="cur == 4">
          <el-input v-model="zdyLink" placeholder="请输入连接"></el-input>
          <el-button
            type="primary"
            @click="inputLink"
            icon="el-icon-circle-check"
            >确定</el-button
          >
        </div>

        <!--tabbar页面 -->
        <div class="linkd-jc" v-if="cur == 5">
          <el-radio-group v-model="radio">
            <div
              v-for="(item, index) in radioList"
              :key="index"
              class="radio-body"
            >
              <el-radio :label="item.url">
                <i :class="item.icon"></i>{{ item.text }}</el-radio
              >
            </div>
          </el-radio-group>
          <div v-show="radio == 'classify/classify'" class="classContent">
            <el-radio-group v-model="radio3">
            <div
              v-for="(item, index) in classifyList"
              :key="index"
              class="radio-body"
            >
              <el-radio :label="item.id">{{ item.name }}</el-radio
              >
            </div>
          </el-radio-group>
          </div>
          <div class="tbBtn">
            <el-button
              type="primary"
              @click="tabbarLink"
              icon="el-icon-circle-check"
              >确定</el-button
            >
          </div>
        </div>

        <!-- 其他页面 -->
        <div class="linkd-jc" v-if="cur == 6">
          <el-radio-group v-model="radio2">
            <div
              v-for="(item, index) in radioList2"
              :key="index"
              class="radio-body"
            >
              <el-radio :label="item.url">
                <i :class="item.icon"></i>{{ item.text }}</el-radio
              >
            </div>
          </el-radio-group>
          <div>
            <el-button
              type="primary"
              @click="otherLink()"
              icon="el-icon-circle-check"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsClassify, getGoodsList } from "@/api/api.js";
export default {
  name: "SiteLink",
  props: {
    show: {
      default: true,
    },
  },
  data() {
    return {
      cur: 1, //当前菜类型 1 商品 2 文章  4 自定义链接 5 tabbat页面 6 其他页面
      menu: [
        { id: 1, txt: "商品", ico: "el-icon-shopping-bag-1" },
        // { id: 2, txt: "文章链接", ico: "el-icon-message" },
        { id: 5, txt: "TabBar页面", ico: "el-icon-set-up" },
        { id: 6, txt: "其他页面", ico: "el-icon-set-up" },
        { id: 4, txt: "自定义链接", ico: "el-icon-set-up" },
      ], //左侧菜单类型

      loading: true, //商品加载中
      nodata: false, //是否有商品数据
      shopCate: [], //店铺行业分类
      shopList: [], //商品列表
      shopTotal: 0, //商品总数
      shopquery: {
        size: 9, //每页显示9条
        current: 1, //当前页
        shopName: "", //店铺名称
        name: "", //商品名
        shopCategoryId: "", //行业ID
      },
      arcCate: [], //文章分类
      arcSonCate: [], //二级分类
      arcList: [], //文章列表
      loading2: true, //加载文章
      nodata2: false, //是否有文章数据
      arcTotal: 0, //文章总数
      arcquery: {
        size: 9, //每页显示9条
        current: 1, //当前页
        searchKeyWord: "", //关键词
        author: "", //作者
        areaFullName: "", //区域
        labelState: "", //标签
        showState: "", //文章状态
        infoType: "", //文章类型
        category1: "", //分类一
        category2: "", //分类二
      },
      classifyList: [], //商品分类列表
      curpage: 0, //当前页面
      zdyLink: "", //自定义连接
      radio: "",
      radio3: '', //商品分类
      goodsQuery: {
        //商品查询条件
        pageIndex: 0,
        pageSize: 10,
        searchKey: "",
      },
      radioList: [
        { url: "home/home", text: "首页", icon: "el-icon-house" },
        {
          url: "classify/classify",
          text: "分类",
          icon: "el-icon-menu",
        },
        {
          url: "liveAndpreSell/liveAndpreSell?type=live",
          text: "直播",
          icon: "el-icon-video-camera",
        },
        {
          url: "liveAndpreSell/liveAndpreSell?type=preSell",
          text: "预售",
          icon: "el-icon-alarm-clock",
        },
        {
          url: "cart/cart",
          text: "购物车",
          icon: "el-icon-shopping-cart-full",
        },
        { url: "mine/mine", text: "我的", icon: "el-icon-user" },
      ],
      radio2: "",
      radioList2: [
        {
          url: "goods/searchGoods",
          text: "商品搜索页",
          icon: "el-icon-search",
        },
        {
          url: "goods/secondKill",
          text: "商品秒杀页",
          icon: "el-icon-sugar",
        },
        {
          url: "goods/preSellGoods",
          text: "商品预售页",
          icon: "el-icon-time",
        },
        {
          url: "goods/groupBuy",
          text: "商品团购页",
          icon: "el-icon-sell",
        },
        {
          url: "goods/newUser",
          text: "新人专享页",
          icon: "el-icon-s-custom",
        },
        {
          url: "order/order",
          text: "订单页",
          icon: "el-icon-s-order",
        },
        {
          url: "mine/userInfo",
          text: "个人信息页",
          icon: "el-icon-user-solid",
        },
        {
          url: "mine/userCode",
          text: "会员码页",
          icon: "el-icon-user",
        },
        {
          url: "mine/problem/problem",
          text: "常见问题页",
          icon: "el-icon-question",
        },

        {
          url: "coupon/couponList",
          text: "优惠券页",
          icon: "el-icon-s-ticket",
        },
        {
          url: "mine/collect",
          text: "收藏夹页",
          icon: "el-icon-collection-tag",
        },
        {
          url: "mine/address/myAddress",
          text: "收货地址页",
          icon: "el-icon-map-location",
        },
        {
          url: "address/pickUpAddress",
          text: "提货点页",
          icon: "el-icon-location-information",
        },
        {
          url: "mine/teamLeader",
          text: "团长申请页",
          icon: "el-icon-user-solid",
        },
        {
          url: "mine/service",
          text: "客服咨询页",
          icon: "el-icon-s-order",
        },
        {
          url: "wallet/wallet",
          text: "我的钱包页",
          icon: "el-icon-wallet",
        },
        {
          url: "wallet/recharge",
          text: "充值页",
          icon: "el-icon-coin",
        },
        {
          url: "wallet/code",
          text: "收付码页",
          icon: "el-icon-aim",
        },
      ],
    };
  },

  mounted() {
    this.getGoodsList();
    this.getArcList();
    this.getGoodsClassify()
  },

  methods: {
    //获取商品列表
    // async getGoodsList() {
    //   this.loading = false;
    //   this.loading2 = false;
    // },

    //商品点击当前页上一下下一页
    shopCurrent(e) {
      this.goodsQuery.pageIndex = e;
      this.loading = true;
      this.getGoodsList();
    },

    getGoodsList() {  //搜索商品
			this.loading = true;
			getGoodsList(this.goodsQuery).then(res => {
        this.loading = false;
				this.shopList = res.data.itemList;
				this.shopTotal = res.data.totalCount;
        console.log('获取商品', this.shopList);
			}).catch(err => {
				
			})
		},

    //搜索商品
    searchGoods() {
			this.shopTotal = 0;
			this.nodata = false;
			this.shopList = [];
			this.getGoodsList();
    },
    selectGoods(goods) {  //选中商品
      this.$parent.link.m = goods.goodsName;
      this.$parent.link.t = 1;
      this.$parent.link.id = goods.goodsId;
      console.log(this.$parent.link);
      this.closeLink();
    },
    // 获取商品分类列表
    getGoodsClassify() {
      getGoodsClassify().then(res => {
        this.classifyList = res.data.goodGroupParentListDtos
        this.radio3 = this.classifyList[0].id
      })
    },

    //清空商品搜索
    clearGoods() {
      this.loading = true;
      this.shopTotal = 0;
      this.nodata = false;
      this.shopList = [];
      this.shopquery.current = 1;
      this.shopquery.shopName = "";
      this.shopquery.name = "";
      this.shopquery.shopCategoryId = "";
      this.shopquery.status = "";
      this.shopquery.shield = "";
      this.getGoodsList();
    },

    //获取文章列表
    async getArcList() {
      this.loading2 = false;
    },

    arcCurrent(e) {
      this.arcquery.current = e;
      this.loading2 = true;
      this.getArcList();
    },

    //搜索文章
    searchArc() {
      this.loading2 = true;
      this.arcTotal = 0;
      this.nodata2 = false;
      this.arcList = [];
      this.arcquery.current = 1;
      this.getArcList();
    },

    //清空文章搜索
    clearArc() {
      this.loading2 = true;
      this.arcTotal = 0;
      this.nodata2 = false;
      this.arcList = [];
      this.arcquery.searchKeyWord = "";
      this.arcquery.author = "";
      this.arcquery.areaFullName = "";
      this.arcquery.labelState = "";
      this.arcquery.showState = "";
      this.arcquery.infoType = "";
      this.arcquery.category1 = "";
      this.arcquery.category2 = "";
      this.arcquery.current = 1;
      this.getArcList();
    },

    //选择
    selectLink(id) {
      this.$parent.link.m = this.menu[this.cur].txt;
      this.$parent.link.t = this.menu[this.cur].id;
      this.$parent.link.id = id;
      this.closeLink();
    },
    //tabbar链接
    tabbarLink() {
      this.closeLink();
      if (this.radio == "") return;
      if(this.radio == "classify/classify") {
        this.$parent.link.id = this.radio3
      }
        this.$parent.link.t = this.cur;
        this.$parent.link.m = this. radioList.find((v) => v.url == this.radio).text;
        this.$parent.link.p = this.radio;
        console.log(this.$parent.link);
    },
    //其他页面链接
    otherLink() {
      this.closeLink();
      if (this.radio2 == "") return;
      this.$parent.link.t = this.cur;
      this.$parent.link.m = this.radioList2.find((v) => v.url == this.radio2).text;
      this.$parent.link.p = this.radio2;
    },
    //自定义连接
    inputLink() {
      // if (this.zdyLink == '') {
      // 	this.$message.error('请输入链接');
      // 	return;
      // }
      // if (!this.checkURL(this.zdyLink)) {
      // 	this.$message.error('请输入正确的链接');
      // 	return;
      // }
      this.closeLink();

      this.$parent.link.t = this.cur;
      this.$parent.link.m = this.menu.find((v) => v.id == this.cur).txt;
      this.$parent.link.p = this.zdyLink;
    },

    checkURL(URL) {
      var str = URL;
      var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
      var objExp = new RegExp(Expression);
      if (objExp.test(str) == true) {
        return true;
      } else {
        return false;
      }
    },

    closeLink() {
      this.$parent.showSiteLink = false;
    },
  },
};
</script>

<style></style>
